<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>联系方式</title>
  <!-- 最新 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="js/jquery.min.js"></script>
  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=lPordGmNN8I3oHbb1PSTrjcWecAuErnY"></script>
  <link rel="stylesheet" href="css/contact.css">
</head>

<body>
  <div class="top-header">
    <div class="container">
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
              aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <div class="logo">
              <a href="index.html">
                <img src="images/logo.png" alt="logo" id="logo" />
              </a>
            </div>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav" id="changeNav">

              <li>
                <a href="companyintroduce.html">公司介绍</a>
              </li>
              <li>
                <a href="product.html">产品服务</a>
              </li>
              <li>
                <a href="contact.html">联系方式</a>
              </li>
              <li>
                <a href="news.html">综合新闻</a>
              </li>
              <li>
                <a href="index.html">首</a>
              </li>
            </ul>
            <div class="search">
              <form id="search">
                <input name="search" type="search" value="搜索" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '搜索';}" required="">
                <button id="btnsearch" type="" class="btn btn-default" aria-label="Left Align">
                  <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                </button>
              </form>
            </div>
          </div>
          <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
      </nav>
    </div>
  </div>

  <!-- 主体 -->
  <div class="content">
    <div class="container">
      <div class="content-left">
        <div class="sec_2">
          <div class="sec_2_container">
            <div class="post2">
              <div class="post2-pic">
                <img src="images/bangong.png" alt="" id="companyIma">
              </div>
              <div class="post2-info">

                <div class="post2_text">
                  <span>
                    <a href="#">联系电话：</a>
                  </span>
                  <span id="companyTel">18080443257</span>
                </div>

                <div class="post2_text">
                  <span>
                    <a href="#">邮箱地址：</a>
                  </span>
                  <span id="companyEmail">1334101793@qq.com</span>
                </div>

                <div class="post2_text">
                  <span>
                    <a href="#">公司地址：</a>
                  </span>
                  <span id="companyAdress">成都市都江堰市青城山东软大道1号</span>
                </div>

                <div class="post2_text">
                  <span>
                    <a href="#">邮编：</a>
                  </span>
                  <span id="companyCode">625300</span>
                </div>

                <div class="post2_text">
                  <span>
                    <a href="#">二维码：</a>
                  </span>
                  <span><img src="./images/erweima.jpg" id="erweima"></span>
                </div>

              </div>
              <div class="clearfix"></div>
              <div class="sale-box">
                <span class="on_sale title_shop">联系方式</span>
              </div>
            </div>
          </div>
        </div>
        <div class="sec_1">
          <div class="sec_1 grids">
            <div class="post1">
              <div id="map"></div>
              <div id="allmap"></div>
              <div class="clearfix"></div>
              <div class="sale-box">
                <span class="on_sale title_shop">公司位置</span>
              </div>
            </div>

          </div>
        </div>

        <div class="sec_3">
          <div class="sec_3_container">
            <div id="sendContact" style="left: 10px;">

              <div class="mainRight">
                <div class="rightBox" id="sedInfo">
                  <div class="title">
                    <span>联系我们</span>
                  </div>
                  <div class="line">
                    <span class="icon-users"></span>
                    <input name="username" type="text" placeholder="请输入名字">
                  </div>
                  <div class="line">
                    <span class="colDark icon-whatsapp"></span>
                    <input name="phone" placeholder="请输入电话">
                  </div>
                  <div class="line">
                    <span class="colDark icon-embed2"></span>
                    <input name="email" type="text" placeholder="请输入邮箱">
                  </div>
                  <div class="line" style="width: 21%;">
                    <button>发送</button>
                  </div>
                  <p class="colWarning textCenter"></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer>
      <p style="text-align: center;color: white;margin-top: 20px;">版权所有 ® 2017-201314</p>
    </footer>
  </div>



  <script type="text/javascript">

    (function () {
      $.ajax({
        url: "/getmap",
        type: 'GET',
        dataType: 'JSON',
        success: function (data) {

          //如果请求成功
          doit(data);
          console.log(data);
        },
        error: function () {
          alert('服务器出错了！！停电了？');
        }
      });
    })()

    function doit(data) {
      var map = new BMap.Map("map", {});                        // 创建Map实例

      var jindu = data[0].jindu;
      console.log(jindu);
      var weidu = data[0].weidu;
      var infor_title = data[0].company_name;
      var infor_adress = data[0].company_produce;

      var point = new BMap.Point(jindu, weidu);
      map.centerAndZoom(point, 15);
      var marker = new BMap.Marker(point);  // 创建标注
      map.addOverlay(marker);               // 将标注添加到地图中
      marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

      var opts = {
        width: 200,     // 信息窗口宽度
        height: 100,     // 信息窗口高度
        title: infor_title, // 信息窗口标题
        enableMessage: true,//设置允许信息窗发送短息
        message: infor_title
      }
      var infoWindow = new BMap.InfoWindow(infor_adress, opts);  // 创建信息窗口对象 
      marker.addEventListener("click", function () {
        map.openInfoWindow(infoWindow, point); //开启信息窗口
      });

      map.centerAndZoom(new BMap.Point(jindu, weidu), 16);     // 初始化地图,设置中心点坐标和地图级别
      map.enableScrollWheelZoom();                            //启用滚轮放大缩小
      if (document.createElement('canvas').getContext) {
        var mapStyle = {
          features: ["road", "building", "water", "land"],//隐藏地图上的poi
          style: "dark"  //设置地图风格为高端黑
        }
        map.setMapStyle(mapStyle);

        var BW = 0,    //canvas width
          BH = 0,    //canvas height
          ctx = null,
          stars = [],   //存储所有星星对象的数组
          timer = null, //定时器
          timeLine = null, //时间轴对象
          rs = [],   //最新的结果
          isNowTimeData = false, //是否显示当前时间的定位情况
          py = null, //偏移
          gridWidth = 10000,//网格的大小
          isOverlay = false,//是否叠加
          //gridWidth   = 1,//网格的大小
          canvas = null; //偏移

        function Star(options) {
          this.init(options);
        }

        Star.prototype.init = function (options) {
          this.x = ~~(options.x);
          this.y = ~~(options.y);
          this.initSize(options.size);
          if (~~(0.5 + Math.random() * 7) == 1) {
            this.size = 0;
          } else {
            this.size = this.maxSize;
          }
        }

        Star.prototype.initSize = function (size) {
          var size = ~~(size);
          this.maxSize = size > 6 ? 6 : size;
        }

        Star.prototype.render = function (i) {
          var p = this;

          if (p.x < 0 || p.y < 0 || p.x > BW || p.y > BH) {
            return;
          }

          ctx.beginPath();
          var gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.size);
          gradient.addColorStop(0, "rgba(7,120,249,1)");
          gradient.addColorStop(1, "rgba(7,120,249,0.3)");
          ctx.fillStyle = gradient;
          ctx.arc(p.x, p.y, p.size, Math.PI * 2, false);
          ctx.fill();
          if (~~(0.5 + Math.random() * 7) == 1) {
            p.size = 0;
          } else {
            p.size = p.maxSize;
          }
        }

        function render() {
          renderAction();
          setTimeout(render, 180);
        }

        function renderAction() {
          ctx.clearRect(0, 0, BW, BH);
          ctx.globalCompositeOperation = "lighter";
          for (var i = 0, len = stars.length; i < len; ++i) {
            if (stars[i]) {
              stars[i].render(i);
            }
          }
        }


        // 复杂的自定义覆盖物
        function ComplexCustomOverlay(point) {
          this._point = point;
        }
        ComplexCustomOverlay.prototype = new BMap.Overlay();
        ComplexCustomOverlay.prototype.initialize = function (map) {
          this._map = map;
          canvas = this.canvas = document.createElement("canvas");
          canvas.style.cssText = "position:absolute;left:0;top:0;";
          ctx = canvas.getContext("2d");
          var size = map.getSize();
          canvas.width = BW = size.width;
          canvas.height = BH = size.height;
          map.getPanes().labelPane.appendChild(canvas);
          //map.getContainer().appendChild(canvas);
          return this.canvas;
        }
        ComplexCustomOverlay.prototype.draw = function () {
          var map = this._map;
          var bounds = map.getBounds();
          var sw = bounds.getSouthWest();
          var ne = bounds.getNorthEast();
          var pixel = map.pointToOverlayPixel(new BMap.Point(sw.lng, ne.lat));
          py = pixel;
          if (rs.length > 0) {
            showStars(rs);
          }
        }
        var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(116.407845, 39.914101));
        map.addOverlay(myCompOverlay);

        var project = map.getMapType().getProjection();
        var bounds = map.getBounds();
        var sw = bounds.getSouthWest();
        var ne = bounds.getNorthEast();
        sw = project.lngLatToPoint(new BMap.Point(sw.lng, sw.lat));
        ne = project.lngLatToPoint(new BMap.Point(ne.lng, ne.lat));

        //左上角墨卡托坐标点
        var original = {
          x: sw.x,
          y: ne.y
        }

        /**
         * 请求定位数据,并在地图上绘制出
         * @param 请求的时间
         * @param 成功后执行的回调函数
         * 
         */
        var requestMgr = {
          request: function (time, successCbk) {
            if (document.location.host === 'developer.baidu.com') {
              var url = "http://lbsyun.baidu.com/jsdemo/data/data";
            } else {
              var url = "../data/data";
            }

            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
              if (xhr.readyState == 4 && xhr.status == 200) {
                if (!isOverlay) {
                  rs = JSON.parse(xhr.responseText);
                } else {
                  rs = rs.concat(JSON.parse(xhr.responseText));
                  if (rs.length > 10000) {
                    rs.splice(0, rs.length - 10000);
                  }
                }
                showStars(rs);
                if (successCbk) {
                  successCbk();
                }
              }
            }
            xhr.open("GET", url, true);
            xhr.send('');
          }
        }

        //显示星星
        function showStars(rs) {
          stars.length = 0;
          var temp = {};
          for (var i = 0, len = rs.length; i < len; i++) {
            var item = rs[i];
            var addNum = gridWidth / 2;
            var x = item[0] * gridWidth + addNum;
            var y = item[1] * gridWidth + addNum;
            var point = project.pointToLngLat(new BMap.Pixel(x, y));
            var px = map.pointToOverlayPixel(point);
            //create all stars
            var s = new Star({
              x: px.x - py.x,
              y: px.y - py.y,
              size: item[2]
            });
            stars.push(s);
            //}
          }
          canvas.style.left = py.x + "px";
          canvas.style.top = py.y + "px";
          renderAction();
        }

        render();

        function nowTimeCbk(time) {
          requestMgr.request(time, function () {
            if (isNowTimeData) {
              setTimeout(function () {
                if (isNowTimeData) {
                  startCbk(nowTimeCbk);
                }
              }, 1000);
            }
          });
        }
        function startCbk(cbk) {
          var now = new Date();
          var time = {
            hour: now.getHours(),
            minute: now.getMinutes(),
            second: now.getSeconds()
          };
          if (cbk) {
            cbk(time);
          }
        };
        startCbk(nowTimeCbk);
      } else {
        alert('请在chrome、safari、IE8+以上浏览器查看本示例');
      }
    }
  </script>


</body>
<script src="js/indexCommon.js"></script>
<script src="js/contact.js"></script>

</html>